<template>
  <el-container class="layout-container">
    <!-- Sidebar -->
    <el-aside width="220px" class="aside">
      <div class="logo">
        <span class="logo-text">首页</span>
      </div>
      <el-menu
        active-text-color="#409EFF"
        background-color="#1d2b36"
        class="el-menu-vertical"
        default-active="4-2"
        text-color="#fff"
      >
        <el-menu-item index="1">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><Money /></el-icon>
          <span>财务管理</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><DataLine /></el-icon>
          <span>数据概览</span>
        </el-menu-item>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>订单明细</span>
          </template>
          <el-menu-item index="4-1">抖音订单明细</el-menu-item>
          <el-menu-item index="4-2">快手订单明细</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="5">
          <el-icon><User /></el-icon>
          <span>达人管理</span>
        </el-menu-item>
        <el-menu-item index="6">
          <el-icon><Goods /></el-icon>
          <span>产品管理</span>
        </el-menu-item>
        <el-menu-item index="7">
          <el-icon><Files /></el-icon>
          <span>素材管理</span>
        </el-menu-item>
        <el-menu-item index="8">
          <el-icon><Setting /></el-icon>
          <span>配置管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- Header -->
      <el-header class="header">
        <div class="header-left">
          <el-icon class="collapse-btn"><Expand /></el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>数据概览</el-breadcrumb-item>
            <el-breadcrumb-item>订单明细</el-breadcrumb-item>
            <el-breadcrumb-item>快手订单明细</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <el-button type="primary" size="small">退出登录</el-button>
          <div class="user-info">
            <el-avatar
              :size="30"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <span class="username">江西XXXX科技有限公司</span>
          </div>
        </div>
      </el-header>

      <!-- Main Content -->
      <el-main class="main-content">
        <!-- Top Tabs -->
        <div class="top-tabs">
          <el-tag closable type="info" class="nav-tag">抖音订单</el-tag>
          <el-tag closable type="success" effect="dark" class="nav-tag active">快手订单明细</el-tag>
          <el-tag closable type="info" class="nav-tag">抖音订单明细</el-tag>
        </div>

        <div class="platform-tabs">
          <div class="tab-item">
            <el-icon><Platform /></el-icon> 抖音
          </div>
          <div class="tab-item active">
            <el-icon><VideoCamera /></el-icon> 快手
          </div>
          <div class="tab-item">
            <el-icon><VideoPlay /></el-icon> 视频号
          </div>
        </div>

        <div class="content-area">
          <el-tabs v-model="activeTab" class="sub-tabs">
            <el-tab-pane label="订单收入" name="income"></el-tab-pane>
            <el-tab-pane label="订单支出" name="expense"></el-tab-pane>
          </el-tabs>

          <!-- Summary Cards -->
          <el-row :gutter="20" class="summary-row">
            <el-col :span="6">
              <el-card shadow="never" class="summary-card">
                <template #header>
                  <div class="card-header">
                    <span>出单概述</span>
                  </div>
                </template>
                <div class="card-body">
                  <div class="stat-item">
                    <div class="label">出单达人数</div>
                    <div class="value">
                      <el-icon color="#79bbff"><User /></el-icon> 414
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="label">出单商品数</div>
                    <div class="value">
                      <el-icon color="#e6a23c"><Goods /></el-icon> 294
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="label">出单直播间数</div>
                    <div class="value">
                      <el-icon color="#95d475"><VideoCamera /></el-icon> 210
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="never" class="summary-card">
                <template #header>
                  <div class="card-header">
                    <span>订单统计</span>
                  </div>
                </template>
                <div class="card-body">
                  <div class="stat-item">
                    <div class="label">GMV</div>
                    <div class="value">
                      <el-icon color="#79bbff"><Money /></el-icon> 190934.56
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="label">预估佣金数</div>
                    <div class="value">
                      <el-icon color="#e6a23c"><Coin /></el-icon> 6658.83
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="label">结算金额数</div>
                    <div class="value">
                      <el-icon color="#e6a23c"><Wallet /></el-icon> 0.00
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="label">订单数量</div>
                    <div class="value">
                      <el-icon color="#95d475"><Tickets /></el-icon> 14635
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="never" class="summary-card">
                <template #header>
                  <div class="card-header">
                    <span>今日看板</span>
                  </div>
                </template>
                <div class="card-body">
                  <div class="stat-item">
                    <div class="label">预估达人</div>
                    <div class="value">
                      <el-icon color="#79bbff"><User /></el-icon> 2
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="label">预估达人</div>
                    <div class="value">
                      <el-icon color="#e6a23c"><UserFilled /></el-icon> 906
                    </div>
                  </div>
                  <div class="stat-item">
                    <div class="label">订单数</div>
                    <div class="value">
                      <el-icon color="#95d475"><List /></el-icon> 110
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- Filters -->
          <div class="filter-section">
            <el-form :inline="true" :model="filters" class="filter-form">
              <el-form-item label="订单时间">
                <el-date-picker
                  v-model="filters.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="2025-11-20"
                  end-placeholder="2025-11-20"
                  size="default"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item label="结算时间">
                <el-date-picker
                  v-model="filters.settleDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  size="default"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item>
                <el-select v-model="filters.adType" placeholder="推广类型" style="width: 120px">
                  <el-option label="全部" value="" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="filters.bizType"
                  placeholder="订单业务类型"
                  style="width: 140px"
                >
                  <el-option label="全部" value="" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="filters.leader" placeholder="团长员工" style="width: 120px">
                  <el-option label="全部" value="" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="filters.channel" placeholder="渠道员工" style="width: 120px">
                  <el-option label="全部" value="" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="filters.orderId" placeholder="订单ID" style="width: 160px" />
              </el-form-item>
              <el-form-item>
                <el-input v-model="filters.activityId" placeholder="活动ID" style="width: 120px" />
              </el-form-item>
              <el-form-item>
                <el-input v-model="filters.promoterId" placeholder="达人ID" style="width: 120px" />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="filters.promoterName"
                  placeholder="达人名称"
                  style="width: 120px"
                />
              </el-form-item>
              <el-form-item>
                <el-input v-model="filters.productId" placeholder="商品ID" style="width: 120px" />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="filters.productName"
                  placeholder="商品名称"
                  style="width: 120px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="Search">查询</el-button>
                <el-button :icon="Refresh">重置</el-button>
                <el-button type="text">修改查询订单列</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- Data Table -->
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            header-cell-class-name="table-header"
          >
            <el-table-column prop="orderId" label="订单ID" width="180">
              <template #default="scope">
                <div class="order-id-cell">
                  <div>{{ scope.row.orderId }}</div>
                  <div class="sub-text">{{ scope.row.subOrderId }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品信息" min-width="250">
              <template #default="scope">
                <div class="product-info">
                  <el-image :src="scope.row.productImage" class="product-img" fit="cover" />
                  <div class="product-detail">
                    <div class="product-name">{{ scope.row.productName }}</div>
                    <div class="product-id">ID: {{ scope.row.productId }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="推广者" width="180">
              <template #default="scope">
                <div class="promoter-info">
                  <div class="promoter-name">{{ scope.row.promoterName }}</div>
                  <div class="promoter-id">达人ID: {{ scope.row.promoterId }}</div>
                  <el-tag size="small" type="danger" effect="plain">达人</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="leader" label="团长" width="100" />
            <el-table-column prop="source" label="来源" width="100" />
            <el-table-column label="支付金额" width="120">
              <template #default="scope"> ¥ {{ scope.row.payAmount }} </template>
            </el-table-column>
            <el-table-column prop="commissionRate" label="团长服务费率" width="120" />
            <el-table-column label="预估服务费收入" width="120">
              <template #default="scope"> ¥ {{ scope.row.estCommission }} </template>
            </el-table-column>
            <el-table-column label="实际服务费" width="100">
              <template #default="scope"> ¥ {{ scope.row.actCommission }} </template>
            </el-table-column>
            <el-table-column label="订单状态" width="100">
              <template #default>
                <el-tag type="success" effect="light">已支付</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="订单时间" width="180">
              <template #default="scope">
                <div class="time-cell">付款时间: {{ scope.row.payTime }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  House,
  Money,
  DataLine,
  Document,
  User,
  Goods,
  Files,
  Setting,
  Expand,
  Platform,
  VideoCamera,
  VideoPlay,
  Coin,
  Wallet,
  Tickets,
  UserFilled,
  List,
  Search,
  Refresh,
} from '@element-plus/icons-vue'

const activeTab = ref('income')

const filters = ref({
  dateRange: '',
  settleDateRange: '',
  adType: '',
  bizType: '',
  leader: '',
  channel: '',
  orderId: '',
  activityId: '',
  promoterId: '',
  promoterName: '',
  productId: '',
  productName: '',
})

const tableData = ref([
  {
    orderId: '2532400093765112',
    subOrderId: '9389712793',
    productImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    productName: '【到手2斤】五香卤煮花生带壳去泥花生下酒菜...',
    productId: '25457814547366',
    promoterName: '吃货岁月欢',
    promoterId: '5100721349',
    leader: '刘林',
    source: '转乐敏',
    payAmount: '6.60',
    commissionRate: '5%',
    estCommission: '0.28',
    actCommission: '0.00',
    payTime: '2025-11-20 16:11:29',
  },
  {
    orderId: '2532402165611394',
    subOrderId: '7754600793',
    productImage: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    productName: 'XL皮毛一体羊羔毛拼接皮夹克2025冬新款...',
    productId: '25564536513146',
    promoterName: '高高精选',
    promoterId: '5100953226',
    leader: '罗俊1',
    source: '涂世玉',
    payAmount: '159.90',
    commissionRate: '3%',
    estCommission: '4.07',
    actCommission: '0.00',
    payTime: '2025-11-20 16:11:13',
  },
  {
    orderId: '2532400342652948',
    subOrderId: '9444667793',
    productImage: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    productName: '云朵泡芙短款羽绒服加厚保暖防风面包服外套...',
    productId: '25606059691892',
    promoterName: '二姐旗舰',
    promoterId: '1214027228',
    leader: '刘治',
    source: '钟乐敏',
    payAmount: '69.99',
    commissionRate: '2%',
    estCommission: '2.37',
    actCommission: '0.00',
    payTime: '2025-11-20 16:10:56',
  },
  {
    orderId: '2532401926346898',
    subOrderId: '6774771793',
    productImage: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    productName: '硬卡小宝半成品手工折纸一捆300张金色好折长7.5宽4...',
    productId: '24947407079850',
    promoterName: '财财好优选',
    promoterId: '4655026318',
    leader: '洪彩祥',
    source: '',
    payAmount: '26.60',
    commissionRate: '3%',
    estCommission: '0.55',
    actCommission: '0.00',
    payTime: '2025-11-20 16:11:25',
  },
])
</script>

<style scoped>
.layout-container {
  height: 100vh;
  background-color: #f5f7fa;
}

.aside {
  background-color: #1d2b36;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.logo {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #2b3c4d;
}

.el-menu-vertical {
  border-right: none;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 50px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.collapse-btn {
  font-size: 20px;
  cursor: pointer;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #606266;
}

.main-content {
  padding: 0;
  background-color: #f5f7fa;
}

.top-tabs {
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  gap: 10px;
}

.nav-tag {
  cursor: pointer;
}

.platform-tabs {
  padding: 15px 20px;
  display: flex;
  gap: 30px;
  background-color: #fff;
  font-size: 16px;
  font-weight: 500;
  color: #606266;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding-bottom: 10px;
}

.tab-item.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.content-area {
  padding: 20px;
}

.sub-tabs {
  background-color: #fff;
  padding: 10px 20px 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.summary-row {
  margin-top: 20px;
}

.summary-card {
  height: 100%;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}

.card-body {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.stat-item {
  text-align: center;
}

.stat-item .label {
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}

.stat-item .value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}

.filter-section {
  background-color: #fff;
  padding: 20px 20px 0;
  margin-top: 20px;
  border-radius: 4px;
}

.filter-form .el-form-item {
  margin-bottom: 18px;
  margin-right: 10px;
}

.product-info {
  display: flex;
  gap: 10px;
}

.product-img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.product-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-name {
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-id {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.order-id-cell {
  font-size: 13px;
}

.sub-text {
  color: #909399;
  font-size: 12px;
}

.promoter-info {
  font-size: 13px;
}

.promoter-id {
  color: #909399;
  font-size: 12px;
  margin: 2px 0;
}

.time-cell {
  font-size: 12px;
  color: #606266;
}

:deep(.table-header) {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: 500;
}
</style>
